<template>
  <div>
    <van-nav-bar fixed title="绩优排位奖" left-arrow @click-left="$utils.back($route.path)" />
    <div class="has-top pos-r mlr-25">
      <div class="bg-primary pos-r br-20 mt-40 color-white ofh">
        <img :src="bgImg">
        <div class="pos-a  left-50 top-50">
          <p class="fs-30" style="vertical-align:bottom">
            <span>奖励金额 </span>
            <span class="state bg-second fs-22">{{ storeData.StateName||'未结算' }}</span>
          </p>
          <p class="fs-72"> <span class="fs-36">￥</span>{{ storeData.RewardMoney ||0 }}</p>
        </div>
        <div class="pos-a plr-50 full-width flex-s-c bottom-30 fs-28">
          <p>业绩PV：{{ storeData.RewardPerformance ||0 }}</p>
          <p>比率：{{ storeData.RewardRatio||0 }}%</p>
        </div>
        <div
          class="date-box dis-inb flex-s-c plr-20 bblr-20 flex-s-0 flex-g-0 pos-a top-0 right-0"
          @click="openDateSelect"
        >
          <span>{{ datetime }}</span>
          <van-icon :name="Icon" size="12" />
        </div>
      </div>
      <div class="flex-s-c mt-35">
        <p class="fs-28 fw-600">会员业绩明细</p>
      </div>
      <van-grid column-num="3" class="mt-30 hb" :border="false">
        <van-grid-item text="会员姓名" />
        <van-grid-item text="会员号" />
        <van-grid-item text="业绩PV" />
      </van-grid>
      <van-grid v-for="(item, index) in RankList" :key="index" class="rankList pos-r arrow" column-num="3" :border="false">
        <van-grid-item @click="gotoDetail(item.UserId)">
          <van-grid-item>
            <div class="flex-center">
              <headPortraitBox class="is-60 flex-s-0 mr-10" :head-portrait-url="item.HeadPortrait" />
              <p class="text-show-line-1">{{ item.RealName }}</p>
            </div>
          </van-grid-item>
        </van-grid-item>
        <van-grid-item :text="item.CardNumber" @click="gotoDetail(item.UserId)" />
        <van-grid-item class="tt" :text="item.Performance" @click="gotoDetail(item.UserId)" />
      </van-grid>
      <no-data v-if="RankList.length === 0" />

      <van-popup v-model="dateSelect" position="bottom" @click-overlay="clickOverlay">
        <van-datetime-picker
          v-model="currentDate"
          item-height="45"
          visible-item-count="4"
          type="year-month"
          title="请选择时间"
          :min-date="minDate"
          :max-date="maxDate"
          @confirm="onConfirm"
          @cancel="clickOverlay"
        />
      </van-popup>
    </div>
  </div>
</template>

<script>
import headPortraitBox from 'components/headPortraitBox'
import noData from 'components/noData'
import { GetUserRankPerformanceReward, GetRankPerformanceChildList } from 'api/rankPerformance'
import utils from 'utils/utils'
export default {
  components: {
    headPortraitBox,
    noData
  },
  data() {
    return {
      bgImg: require('assets/images/blueChipRank.png'),
      // 时间筛选
      datetime: '',
      dateSelect: false,
      Icon: 'arrow-down',

      storeData: {},
      RankList: [],

      minDate: new Date(1920, 0, 1),
      maxDate: new Date(),
      currentDate: new Date(),
      requestData: {}
    }
  },
  watch: {
    dateSelect(newVal, oldVal) {
      if (newVal === true) {
        this.Icon = 'arrow-up'
      } else {
        this.Icon = 'arrow-down'
      }
    }
  },
  created() {
    this.currentDate = new Date(new Date().setMonth((new Date().getMonth() - 1)))
    this.maxDate = this.currentDate
    this.datetime = utils.dateFomat('yyyy', this.currentDate) + '年' + utils.dateFomat('m', this.currentDate) + '月'
    this.requestData.months = utils.dateFomat('yyyy-mm', this.currentDate)
    this.GetUserRankPerformanceReward()
    this.GetRankPerformanceChildList()
  },
  mounted() {

  },
  methods: {
    openDateSelect() {
      this.dateSelect = true
    },
    onConfirm(value) {
      console.log(value)
      this.datetime = utils.dateFomat('yyyy', value) + '年' + utils.dateFomat('m', value) + '月'
      this.requestData.months = utils.dateFomat('yyyy-mm', value)
      this.GetUserRankPerformanceReward()
      this.GetRankPerformanceChildList()
      this.dateSelect = false
    },
    clickOverlay() {
      this.dateSelect = false
    },
    GetUserRankPerformanceReward() {
      GetUserRankPerformanceReward(this.requestData).then(res => {
        if (res) {
          if (res.Data) {
            this.storeData = res.Data
          }
        }
      })
    },
    GetRankPerformanceChildList() {
      this.RankList = []
      GetRankPerformanceChildList(this.requestData).then(res => {
        if (res) {
          if (res.Data.length && res.Data.length > 0) {
            this.RankList = res.Data
          }
        }
      })
    },
    gotoDetail(UserId) {
      const params = 'months=' + this.requestData.months + '&childUserId=' + UserId
      this.$router.push({
        path: '/reward/rankDetail?' + params
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.br-left{
  border-radius:30px 0 0 30px;
}
.state{
  display: inline-block;
  padding: 0 17px 0 11px;
  border-radius: 0 22px 22px 22px;
}
.date-box {
  height: 62px;
  line-height: 62px;
  background: rgba(255,255,255,0.3);
}
.tt {
  /deep/ .van-grid-item__text {
    @include color-primary;
  }
}
.rankList {
  /deep/.van-grid-item__content{
    padding: 5px 2px;
  }
}
.arrow:after{
  right: 20px;
  top: calc(50% - 8px);
}

</style>
